<!doctype html>
<html lang="en">
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?093a8c24001a87f3d24cf2f6c52cd2e4";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<!--swaper-->
<link rel="stylesheet" href="/lib/swiper/swiper-bundle.min.css">
<body style="background: #f3f3f3">
<!--头部部分-->
<header class="heads" th:include="cultivateWeb/header :: header(true)"></header>
<!--banner-->

<!--<div class="phone_hide" id="bannerFive" class="layui-carousel"  lay-filter="banner" style="height: 500px;"  >-->
<!--   <div carousel-item id="banner" ></div>-->
<!--</div>-->
<style>
    .mySwiper{
        width: 100%;
        height: 394px;
    }

    .mySwiper .swiper-slide {
        left:calc(-1 * ((100% - 1280px) / 2 ))!important;
        /*filter: blur(4px);*/
        opacity: 0.6;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mySwiper .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mySwiper .swiper-slide-active{
        left: calc(-1 * ((100% - 1280px) / 2 ))!important;
        /*filter: blur(4px);*/
        opacity: 0.6;
    }
    .mySwiper .swiper-slide-next{
        width: 1260px !important;
        left: calc(-1 * ((100% - 1280px) / 2 ))!important;
        /*filter: blur(0px);*/
        opacity: 1;
    }

    .swiper-container-free-mode>.swiper-wrapper{
        transition-timing-function: linear !important;
    }
    /*.swiper2 .swiper-slide-active img,*/
    /*.swiper2 .swiper-slide-prev img{*/
    /*    height: 274px;*/
    /*    width: 200px;*/
    /*}*/
    .swiper2 .swiper-slide{
        height: 274px!important;
        width: calc(100% / 5)!important;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
    }
    .swiper2 #my-title{
        position: absolute;
        top: 0;
        left: 240px;
        width: calc(100% - 285px);
        height: calc(100% - 200px);

    }
</style>
<div class="swiper mySwiper"  >
    <div class="swiper-wrapper mywrapperOne">

    </div>
    <div class="swiper-pagination"></div>
<!--    <div class="swiper-button-next"></div>-->
<!--    <div class="swiper-button-prev"></div>-->
</div>


<div class="main-md" style="background-color: #FFFFFF; padding: 10px 26px 0 26px;">
    <!-- 热门推荐课程 -->
    <div class="rmtjkc aa">
        <div class="xianshi">
            <div class="kctit clear" style="margin: 30px 0 20px 0px;">
                <span style="border-left: 4px solid rgba(2, 167, 240, 1); color: #027cc9;
    font-size: 16px;
    padding-left: 10px;
    font-weight: bold;
">精品课程</span>
                <div class="cai-trts rt">
                    <a href="/cultivate/courseIndex?pageSign=1" class="gd on">
                        <img style="width: 60px; margin-right: 20px;  height: 20px;" src="/img/icon-more.png" alt="图片">

                    </a>
                </div>
            </div>
            <div class="qiehuan active">
                <ul class="clear" id="course">
                </ul>
            </div>
        </div>
        <div class="xianshi">
            <div class="kctit clear" style="margin: 30px 0 20px 0px;">
                <span style="border-left: 4px solid rgba(2, 167, 240, 1); color: #027cc9;
    font-size: 16px;
    padding-left: 10px;
    font-weight: bold;">自建课程</span>
                <div class="cai-trts rt">
                    <a href="/cultivate/courseIndex?pageSign=2" class="gd on">
                        <img style="width: 60px; margin-right: 20px;  height: 20px;" src="/img/icon-more.png" alt="图片">
                    </a>
                </div>
            </div>
            <div class="qiehuan active">
                <ul class="clear" id="coursetwo">
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="neirong clear main-md" style="background-color: #FFFFFF;padding: 10px 26px 0 26px;">
    <div class="kctit clear" style="margin: 30px 0 20px 0px;">
        <span style="border-left: 4px solid rgba(2, 167, 240, 1);color: #027cc9;
    font-size: 16px;
    padding-left: 10px;
    font-weight: bold;">院校名师</span>
        <div class="cai-trts rt">
            <a href="/cultivate/courseIndex?pageSign=3" class="gd on">
                <img style="width: 60px; margin-right: 20px;  height: 20px;" src="/img/icon-more.png" alt="图片">
            </a>
        </div>
    </div>
    <div class="qiehuan gkk active" style="margin: 10px 5px 25px 5px;" id="teacher">
    </div>
</div>

<div class="neirong clear main-md" style="background-color: #FFFFFF;padding: 10px 26px 0 26px;">
    <div class="kctit clear " style="margin: 30px 0 20px 0px;">
        <span style="border-left: 4px solid rgba(2, 167, 240, 1);color: #027cc9;
    font-size: 16px;
    padding-left: 10px;
    font-weight: bold;">新闻动态</span>
                <div class="cai-trts rt">
                    <a href="/certificate/policyInfo" class="gd on">
                        <img style="width: 60px; margin-right: 20px;  height: 20px;" src="/img/icon-more.png" alt="图片">
                    </a>
                </div>
    </div>
    <div class="qiehuan gkk active" style="margin: 10px 5px;">
        <style>
            .lf:hover{
                cursor: pointer;
            }
        </style>
        <div class="lf"  id="Oneclick">

            <img id="mynewsimg" style="width:470px;height:280px" src="" alt="图片">
            <div>
                <div class="lf" id="mynewslf" style="margin-top: 10px;">
                </div>
                <div class="rt" id="mynewsrt" style="margin-top: 10px;">
                </div>
            </div>
        </div>
        <div class="lf" style="width: calc(100% - 520px);height:348px;">
            <div class="clear" id="journalismRight" style="width: 100%">
            </div>
        </div>

    </div>
</div>



<!--页尾-->
<div class="foots" th:include="cultivateWeb/header :: footer"></div>
<script src="/js/move.js"></script>
<!--swaper-->
<script src="/lib/swiper/swiper-bundle.min.js"></script>
<script>

    var selectedList = [null, null, null, null, null, null];
    //banner轮播
    // layui.use(['carousel', 'form'], function () {
    //     var carousel = layui.carousel;
    //     var ins = carousel.render({
    //         elem: '#bannerFive',
    //         arrow: 'always',
    //         width: '100%', //设置容器宽度
    //         height:'500px',
    //         anim: 'fade', //轮播切换动画方式
    //         autoplay: true
    //     });
    //     $.ajax({
    //         url: "/jzApi/traIndex/selBanners",
    //         type: 'GET',
    //         success: function (res) {
    //             var list = res.data;
    //             var banners = '';
    //             list.forEach(function (item, index) {
    //                 banners += '<div><img src="' + item.value + '" width="auto" height="100%"> </div>';
    //             });
    //             $("#banner").html(banners);
    //             ins.reload({elem: '#bannerFive'});
    //         }
    //     });
    // });


    $(function () {
        //轮播图获取
            $.ajax({
                url: "/jzApi/traIndex/selBanners",
                type: 'GET',
                success: function (res) {
                    var list = res.data;
                    var banners = '';
                    list.forEach(function (item, index) {

                        banners += '<div class="swiper-slide"><img src="'+item.value+'" style="width: 100%;height: 100%; object-fit: fill;" /></div>';
                        // banners += '<div class="swiper-slide"><img src="https://s4.aconvert.com/convert/p3r68-cdx67/tlix6-nmwdf.jpg" style="width: 100%;height: 100%;" /></div>';
                    });
                    if(list.length==1){
                        banners += '<div class="swiper-slide"><img src="'+list[0].value+'" style="width: 100%;height: 100%; object-fit: fill;"  /></div>';
                        banners += '<div class="swiper-slide"><img src="'+list[0].value+'" style="width: 100%;height: 100%; object-fit: fill;"  /></div>';
                        banners += '<div class="swiper-slide"><img src="'+list[0].value+'" style="width: 100%;height: 100%; object-fit: fill;"  /></div>';

                    }else if(list.length==2){
                        banners += '<div class="swiper-slide"><img src="'+list[0].value+'" style="width: 100%;height: 100%; object-fit: fill;"  /></div>';
                        banners += '<div class="swiper-slide"><img src="'+list[1].value+'" style="width: 100%;height: 100%; object-fit: fill;"  /></div>';

                    }else{
                        banners += '<div class="swiper-slide"><img src="'+list[0].value+'" style="width: 100%;height: 100%; object-fit: fill;"  /></div>';
                    }
                    $(".mywrapperOne").html(banners);

                        let myswiper= new Swiper(".mySwiper", {
                            slidesPerView: 3,
                            spaceBetween: 0,
                            loop : true, //环路，让Swiper看起来是循环的
                            speed : 500, //速度
                            autoplay : true,
                            pauseOnMouseEnter:true,
                            pagination: {
                                el: ".swiper-pagination",
                                clickable: true,
                            },
                            // navigation: {
                            //     nextEl: ".swiper-button-next",
                            //     prevEl: ".swiper-button-prev",
                            // },
                        });
                        myswiper.update();

                }
            });

        //课程数据
        $.ajax({
            url: "/courses/getCourseList",
            type: 'POST',
            data:JSON.stringify( {
                isDeleted: 0,
                newType: 1,//   1.精品课程2.自建课程
                paging:0,
                publicity:0,
                state:0,
                current: 1,
                size: 8
            }),
            contentType:"application/json",
            datatype:"json",
            success: function (res) {
                if (res.data.pages == 0) {
                    $("#course").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data.records;
                    var course = '';
                    list.forEach(function (item, index) {
                        course += `<li style="margin: 10px;width: calc((100% / 4) - 20px);padding: 0; border: 0;">
                                        <a href="/couInfo/couInfo?id=${item.id}&pageSign=1" style="width:100%">
                                        <div style="position: relative;width:100%">
                                            <img style="width: 100%;object-fit: none; border-radius: 10px 10px 0 0;" src="${item.introducePortrait}" alt="图片">

                                        </div>
                                        <div style="width:100%;border: 1px solid #EFEFEF;border-top: 0;margin-top:0;padding: 10px;border-radius: 0 0 10px 10px;">
                                            <h1>${item.name}</h1>
                                         <h2 style="padding: 10px 0;border-bottom: 1px solid #EFEFEF;">
                                          ${item.createrName}
<!--                                          <span class="red lf"> a}</span>-->
<!--                                          <span class="lf" style="color: #666"> item.teacherName} </span>-->
                                         </h2>
                                          <div style="margin: 10px 0;">${item.browseNum}人已学习</div>
                                   </div>
                                 </a>
                            </li>`
                    });
                    $("#course").html(course);
                }
            }
        });
        $.ajax({
            url: "/courses/getCourseList",
            type: 'POST',
            data:JSON.stringify( {
                isDeleted: 0,
                newType: 2,//   1.精品课程2.自建课程
                paging:0,
                publicity:0,
                state:0,
                current: 1,
                size:  8
            }),
            contentType:"application/json",
            datatype:"json",
            success: function (res) {
                if (res.data.pages == 0) {
                    $("#coursetwo").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data.records;
                    var course = '';
                    list.forEach(function (item, index) {
                        course += `<li style="margin: 10px;width: calc((100% / 4) - 20px);padding: 0; border: 0;">
                                        <a href="/couInfo/couInfo?id=${item.id}&pageSign=2" style="width:100%">
                                        <div style="position: relative;width: 100%;">
                                            <img style="width: 100%;object-fit: none; border-radius: 10px 10px 0 0;" src="${item.introducePortrait}" alt="图片">
<!--                                            b}-->
                                        </div>
                                        <div style="border: 1px solid #EFEFEF;border-top: 0;margin-top:0;padding: 10px;border-radius: 0 0 10px 10px;">
                                            <h1>${item.name}</h1>
                                         <h2 style="padding: 10px 0;border-bottom: 1px solid #EFEFEF;">
                                          ${item.createrName}
<!--                                          <span class="red lf"> a}</span>-->
<!--                                          <span class="lf" style="color: #666"> item.teacherName} </span>-->
                                         </h2>
                                          <div style="margin: 10px 0;">${item.browseNum}人已学习</div>
                                   </div>
                                 </a>
                            </li>`
                    });
                    $("#coursetwo").html(course);
                }
            }
        });

        // 院校名师
        $.ajax({
            url: "/famousTeacher/list",
            type: 'GET',
            success: function (res) {
                var list = res.data;
                if (list.length == 0) {
                    $("#teacher").html(`<div class="noData" style="font-size: 16px;    height: 300px;   width: 100%;   display: flex;
                                justify-content: center;  align-items: center;">暂无数据</div>`);
                } else {
                        var teacher = `<div class="swiper swiper2 swiper-no-swiping" style="height: 100%;width: 100%;">  <div class="swiper-wrapper" style="align-items: flex-end;">`;
                        var myTitle = ''
                        list.forEach(function (item, index) {
                            if (index == 0) {
                                myTitle = `
                              <div style="font-size: 16px;text-align: left;font-weight: bold;">${item.name}</div>
                 <div style="margin: 10px 0;">
                     ${item.position}
                 </div>`
                            }
                            teacher += `  <div class="swiper-slide"  ><img src="${item.image}"width="150" height="200" alt="图片" />
                                    <div class="myTitle" style="    display: none;" >
                                     <div style="font-size: 16px;text-align: left; font-weight: bold;">${item.name}</div>
                                     <div style="margin: 10px 0;">
                                          ${item.position}
                                  </div>  </div>  </div>   `
                        });
                        teacher += `  </div> <div class="my-pagination swiper-pagination"></div> <div id="my-title">  ${myTitle}</div></div> `

                        $("#teacher").html(teacher);

                        new Swiper(".swiper2", {
                            slidesPerView: 5,
                            // spaceBetween: 20,
                            freeMode: true,
                            loop: true, //环路，让Swiper看起来是循环的
                            speed : 500, //速度
                            autoplay : true,
                            // pagination: {
                            //     el: ".my-pagination",
                            //     clickable: true,
                            // },
                            on: {
                                init:(swiper)=>{
                                    swiper.slidesEl.getElementsByClassName("swiper-slide")[0].getElementsByTagName("img")[0].style.width="185px";
                                    swiper.slidesEl.getElementsByClassName("swiper-slide")[0].getElementsByTagName("img")[0].style.height="274px";
                                    // swiper.slidesEl.getElementsByClassName("swiper-slide")[0].style.justifyContent="flex-start";


                                },
                                slideChangeTransitionEnd: (swiper) => {
                                    document.getElementById("my-title").innerHTML = swiper.slidesEl.getElementsByClassName("swiper-slide")[1].getElementsByClassName('myTitle')[0].innerHTML
                                    swiper.slidesEl.getElementsByClassName("swiper-slide")[0].getElementsByTagName("img")[0].style.width="150px";
                                    swiper.slidesEl.getElementsByClassName("swiper-slide")[0].getElementsByTagName("img")[0].style.height="200px";
                                    // swiper.slidesEl.getElementsByClassName("swiper-slide")[0].style.justifyContent="center";
                                    swiper.slidesEl.getElementsByClassName("swiper-slide")[1].getElementsByTagName("img")[0].style.width="185px";
                                    swiper.slidesEl.getElementsByClassName("swiper-slide")[1].getElementsByTagName("img")[0].style.height="274px";
                                    // swiper.slidesEl.getElementsByClassName("swiper-slide")[1].style.justifyContent="flex-start";
                                },
                                touchMove: (swiper, event) => {
                                    document.getElementById("my-title").innerHTML = swiper.slidesEl.getElementsByClassName("swiper-slide")[0].getElementsByClassName('myTitle')[0].innerHTML

                                },
                            },
                            // navigation: {
                            //     nextEl: ".my-button-next",
                            //     prevEl: ".my-button-prev",
                            // },
                        });
                    }
                }
        });


        //新闻
        $.ajax({
            url: "/jzApi/index/selNewsList",
            type: 'GET',
            data: {
                firstColumn: '',
                columnName: '',
                current: 1,
                number: 10,
            },
            success: function (res) {

                if (res.data.pages == 0) {
                    $("#news").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data.records;
                    var news = '';
                    list.forEach((item, index) =>{
                        var a = '';
                        if (item.istop == 1) {
                            a = '<span class="top">🔝置顶</span>';
                        }
                        a=a+item.title

                        if(index==0){
                            if(a.length>30){
                                a=a.substring(0,25)+"..."
                            }
                            $('#mynewsimg').attr('src',item.thumbnail);
                            $('#mynewslf').text(a);
                            $('#mynewsrt').text(item.createrDate);
                            $('#Oneclick').click(()=>{
                                const a = document.createElement('a')
                                a.style.display = 'none';
                                a.target="_blank";
                                a.href = `/certificate/policyDetail?id=${item.id}`
                                a.click()
                            })
                        }else{
                            //缩小

                            const dom = document.createElement('span');
                            dom.style.display = 'inline-block';
                            dom.style.fontSize='12px';
                            dom.textContent = a;
                            document.body.appendChild(dom);
                            let num=a.length
                            while (dom.clientWidth>($('#journalismRight')[0].clientWidth - 190)){
                                num=num-3
                                a=a.substring(0,num)+'...'
                                dom.textContent = a;
                            }
                            document.body.removeChild(dom);
                            // let padding=index==1?'0px':'calc((3px / 8) + 20px) 0 0 0';
                            let padding=index==1?'0px':'calc( 20px - (22px / 8)) 0 0 0';

                            news += `<a href="/certificate/policyDetail?id=${item.id}" target="_blank" class="flex"
                         style="display: flex; flex-direction: row;   justify-content: space-around;    padding:${padding} ;">
                            <div class="span_2" style="width: calc(100% - 150px);padding-left: 20px; text-align: left;"  >${a} </div>
                            <div class="span_1"  style="width: 150px;padding-left: 10px;text-align: right;" >${item.createrDate}</div>
                            </a>`
                        }

                    });
                    $("#journalismRight").html(news);
                }

            }
        });

        $(".classification").mouseenter(function () {
            $(".revi-nav-wrapper").show();
            $(".nav-ce").show();
        });
        $(".nav-ce").mouseleave(function () {
            $(".revi-nav-wrapper").hide();
            $(".nav-ce").hide();
        })
        /*二级导航*/
        $('.list-cn>li').mouseenter(function () {
            $(this).addClass('active').siblings().removeClass('active');
            var n = $(this).index();
            $('.list-d>li').eq(n).addClass('active').siblings().removeClass('active');
            $('.nav-r').fadeIn();
            $('.revi-banner .swiper-pagination-bullet').css('display', 'none');
        });
        $('.nav-ce').on('mouseleave', function () {
            $(this).css({"border": "1px solid transparent", "background-color": "transparent"});
            $('.nav-r').fadeOut();
            // $('.list-d>li').removeClass('active');
            // $('.list-cn>li').removeClass('active');
            $('.revi-banner .swiper-pagination-bullet').fadeIn();
        });
        $('.aptitude-city-ul li').on('onmousedown', 'a', function () {
            $(this).addClass('active').siblings.removeClass('active');
        })
    })

    $('.kctit ul li').click(function () {
        var index = $(this).index();
        $(this).addClass('active').siblings().removeClass('active');
        $('.qiehuan').eq(index).addClass('active').siblings('.qiehuan').removeClass('active');
    })

</script>
</body>

</html>